<template>
  <div class="vip-pay">
    <van-nav-bar
      title="开通绿卡"
      :border=false
      :fixed="true"
      @click-left="handleToback"
      left-arrow
      style="height:44px"
    />
    <div class="user-info-box">
      <img class="icon-image" :src="user_image.login_icon"  alt="">
      <div class="person-info">
        <span>{{userInfo.user_name}}</span>
        <i>{{vipTipMsg}}</i>
      </div>
    </div>

    <div class="vip-desc">
      <p class="title">开通绿卡享三大权益，预计每单省6.66元</p>
      <van-grid :column-num="3"
                :border="false">
        <van-grid-item icon="vip-card-o"
                       text="专享券"
                       style="color:#ee0a24" />
        <van-grid-item icon="discount"
                       text="专享特价"
                       style="color:#ee0a24" />
        <van-grid-item icon="gem-o"
                       text="2倍积分"
                       style="color:#ee0a24" />
      </van-grid>
    </div>

    <!-- 会员类型 -->
    <div class="vip-type">
      <div class="choose-type"
           :class="{selected:checked,normal:!checked}"
           @click="chooseClick(1)">
        <i>5折</i>
        <span class="title">年卡·365天</span>
        <a href="javaScript:;" class="cart-checkbox" :checked="checked"></a>
        <p>相当于约0.24元/天</p>
        <div class="price">¥88</div>
        <span class="origin-price">¥188</span>
      </div>
     <div class="choose-type"
           :class="{selected:secondChecked,normal:!secondChecked}"
           @click="chooseClick(2)">
        <i>7折</i>
        <span class="title">年卡·90天</span>
        <a href="javaScript:;"
           class="cart-checkbox check"
           :checked="secondChecked"></a>
        <p>相当于约0.33元/天</p>
        <div class="price">¥30</div>
        <span class="origin-price">¥45</span>
      </div>
    </div>
    <!-- 支付方式 -->
      <pay-type />
    <!-- 支付按钮 -->
    <div class="pay-button" @click="clickPay">立即支付</div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import PayType from '@/components/common/paytype/PayType'
export default {
  name: 'VipPay',
  data () {
    return {
      user_image: {
        login_icon: require('@/assets/img/mine/defaultImgs.jpg')
      },
      checked: true,
      vipTipMsg: '绿卡未开通',
      secondChecked: false,
      radio: '1',
    }
  },
  components: {
    PayType
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    handleToback () {
      this.$router.back()
    },
    chooseClick (index) {
      if (index == 1) {
        if (!this.checked) {
          this.checked = true
          this.secondChecked = false
        } else {
          return
        }
      } else {
        if (!this.secondChecked) {
          this.checked = false
          this.secondChecked = true
        } else {
          return
        }
      }
    },
    clickPay () {
      this.$toast({
        message: '暂为开发',
        duration: 800
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.vip-pay {
  @include setAllcover(999);
  background-color: $text-color-white;
  padding-bottom: px2rem(70);
  .van-nav-bar {
    background-color: #303747;
    font-size: px2rem(11);
  }
  .van-nav-bar /deep/ .van-nav-bar__title,
  .van-nav-bar /deep/ .van-icon {
   color: $text-color-white;
  }
  .user-info-box {
    height: px2rem(52);
    padding-left: px2rem(17.5);
    margin-top: px2rem(44);
    background-color:#303747;
    display: flex;
    align-items: center;
    .icon-image {
      width: px2rem(35);
      height: px2rem(35);
      border-radius: 50%;
      }
    .person-info {
      display: flex;
      flex-direction: column;
      color: $text-color-white;
      margin-left: px2rem(17.5);
      font-size: px2rem(14);
      i {
        font-size: px2rem(10);
        color: $bg-color-page;
      }
    }
  }
  .vip-desc {
    width: 100%;
    position: relative;
    padding-top: px2rem(17.5);
    background-color: $text-color-white;
    .title {
      padding-left: px2rem(14);
      padding-right: px2rem(14);
      font-size: px2rem(14);
      line-height: px2rem(17.5);
      font-weight: bolder;
    }
  }
  .vip-type {
    display: flex;
      @include setWH(100%, px2rem(140));
    padding-top: px2rem(17.5);
    .selected {
      background-color: #ecfef0;
    }
    .normal {
      background-color: $bg-color-page;
    }
    .choose-type {
      @include setWH(35%, 92%);
      margin-left: px2rem(17.5);
      border-radius: px2rem(10);
      position: relative;
    }
    i {
      display: block;
      @include setWH(px2rem(32), px2rem(17.5));
      line-height: px2rem(17.5);
      background-color: $theme-color-orange;
      text-align: right;
      padding-right: px2rem(3);
      @include setFontColor( px2rem(14), $bg-color-page);
      border-radius: px2rem(8) px2rem(3) px2rem(3) 0;
    }
    .title {
      padding-left: px2rem(12);
      @include setFontColor(px2rem(14), $text-color-black);
    }
    a {
      display: inline-block;
      margin-left: px2rem(16);
      margin-right: px2rem(14);
      vertical-align: top;
    }
    .cart-checkbox {
      background: url("../../../assets/img/cart/shop-icon.png") no-repeat;
      background-size: px2rem(44) px2rem(88);
      @include setWH(px2rem(17.5), px2rem(17.5));
    }
    .check {
      margin-left: px2rem(20);
    }
    .cart-checkbox[checked] {
      background-position: px2rem(-21) 0;
    }
    p {
      padding-top: px2rem(3);
      @include setFontColor(px2rem(10), #9faba1);
      padding-left: px2rem(12);
      white-space: nowrap;
      margin-bottom: px2rem(17.5);
    }
    .price {
      display: inline;
      padding-left: px2rem(12);
      padding-right: px2rem(8);
      @include setFontColor(px2rem(26), $theme-color-red);
    }
    .origin-price {
      @include setFontColor(px2rem(13), $text-color-pl);
      text-decoration: line-through;
    }
  }
  .pay-type {
    img {
      @include setWH(px2rem(30), px2rem(25));
      vertical-align: middle;
      margin-right: px2rem(5);
    }
  }
    .pay-button {
      position: fixed;
      left: 5%;
      right: 5%;
      z-index: 999;
      bottom: px2rem(17.5);
      @include setWH(90%, px2rem(44));
      line-height: px2rem(44);
      text-align: center;
      border-radius: px2rem(26);
      color: $text-color-white;
      background-color: $theme-color-red;
    }
  }
</style>
